import type { WebFontsOptions } from '@unocss/preset-web-fonts'

/** 变量 */
export const vars: Record<string, string> = {
  // 品牌色 / 常规
  'primary-6': '#165DFF',
  // 品牌色 / 悬浮
  'primary-5': '#4080FF',
  // 品牌色 / 点击
  'primary-7': '#0E42D2',
  // 品牌色 / 特殊场景
  'primary-4': '#6AA1FF',
  // 品牌色 / 一般禁用
  'primary-3': '#94BFFF',
  // 品牌色 / 文字禁用
  'primary-2': '#BEDAFF',
  // 品牌色 / 浅色/白底悬浮
  'primary-1': '#e8f3ff',
  // 链接 / 常规
  'link-6': '#165DFF',
  // 链接 / 悬浮
  'link-5': '#4080FF',
  // 链接 / 点击
  'link-7': '#0E42D2',
  // 链接 / 特殊场景
  'link-4': '#6AA1FF',
  // 链接 / 一般禁用
  'link-3': '#94BFFF',
  // 链接 / 文字禁用
  'link-2': '#BEDAFF',
  // 链接 / 浅色/白底悬浮
  'link-1': '#e8f3ff',
  // 错误 / 常规
  'danger-6': '#f53f3f',
  // 错误 / 悬浮
  'danger-5': '#f76560',
  // 错误 / 点击
  'danger-7': '#cb272d',
  // 错误 / 禁用
  'danger-4': '#f98981',
  // 错误 / 一般禁用
  'danger-3': '#fbaca3',
  // 错误 / 文字禁用
  'danger-2': '#fdcdc5',
  // 错误 / 浅色背景
  'danger-1': '#ffece8',
  // 成功 / 常规
  'success-6': '#00b42a',
  // 成功 / 悬浮
  'success-5': '#23c343',
  // 成功 / 点击
  'success-7': '#009a29',
  // 成功 / 特殊场景
  'success-4': '#4cd263',
  // 成功 / 一般禁用
  'success-3': '#7be188',
  // 成功 / 文字禁用
  'success-2': '#aff0b5',
  // 成功 / 浅色背景
  'success-1': '#e8ffea',
  // 警示 / 常规
  'warning-6': '#ff7d00',
  // 警示 / 悬浮
  'warning-5': '#ff9a2e',
  // 警示 / 点击
  'warning-7': '#d25f00',
  // 警示 / 特殊场景
  'warning-4': '#ffb65d',
  // 警示 / 一般禁用
  'warning-3': '#ffcf8b',
  // 警示 / 文字禁用
  'warning-2': '#ffe4ba',
  // 警示 / 浅色背景
  'warning-1': '#fff7e8',

  // 分割线/浅
  'color-border-1': '#f3f5f7',
  // 分割线/中
  'color-border-2': '#EEEFF2',
  // 分割线/深
  'color-border-3': '#DFE2E5',
  // 控件描边/常规
  'color-border-4': '#DFE2E5',
  // 控件描边/悬停
  'color-border-5': '#C7C9CC',
  // 透明度描边
  'color-border-6': 'rgba(29, 33, 41, 0.16)',

  // 浅/禁用
  'color-fill-1': '#f7f8fa',
  // 中/白底悬浮
  'color-fill-2': '#f2f3f5',
  // 深/灰底悬浮
  'color-fill-3': '#E5E6EB',
  // 表格悬停
  'color-fill-4': 'rgba(29, 33, 41, 0.04)',

  // 强调/标题
  'color-text-1': '#1d2129',
  // 次强调/正文
  'color-text-2': '#393C40',
  // 次要信息
  'color-text-3': '#646A73',
  // 辅助文字-1
  'color-text-4': '#8F959E',
  // 辅助文字-2
  'color-text-5': '#A6ADB8',
  // 功能禁用
  'color-text-6': '#ADAFB2',
  // 控件提示
  'color-text-7': '#BFC2C7'
}
/** 渐变色 Gradient Colors */
export const gradientColors: Record<string, string> = {
  'gradient-blue-1':
    'linear-gradient(180deg, rgba(22, 93, 255, 0.06) 0%, rgba(22, 93, 255, 0.00) 100%)',
  'gradient-orange-1':
    'linear-gradient(180deg, rgba(255, 125, 0, 0.06) 0%, rgba(255, 125, 0, 0.00) 100%)',
  'gradient-green-1':
    'linear-gradient(180deg, rgba(0, 180, 42, 0.06) 0%, rgba(0, 180, 42, 0.00) 100%)',
  'gradient-red-1':
    'linear-gradient(180deg, rgba(245, 63, 63, 0.06) 0%, rgba(245, 63, 63, 0.00) 100%)',
  'gradient-yellow-1':
    'linear-gradient(180deg, rgba(255, 184, 0, 0.06) 0%, rgba(255, 184, 0, 0.00) 100%)',
  'gradient-gray-1':
    'linear-gradient(180deg, rgba(87, 121, 173, 0.06) 0%, rgba(87, 121, 173, 0.00) 100%))'
}

/** unocss rules 加入 bg-* text-* */
export const unoColorsRules = Object.keys(vars).reduce(
  (pre, cur) => {
    if (cur.startsWith('color-border')) return pre
    let key = cur
    if (cur.startsWith('color-text-')) {
      key = cur.replace('color-text', 'text')
      const css = { color: vars[cur] }
      pre.push([key, css])
    } else if (cur.startsWith('color-fill-')) {
      key = cur.replace('color-fill', 'fill')
      const bgCss = { 'background-color': vars[cur] }

      pre.push([`bg-${key}`, bgCss])
    } else {
      if (key.endsWith('-6')) key = key.replace('-6', '')
      const textCss = { color: vars[cur] }
      pre.push([`text-${key}`, textCss])

      const bgCss = { 'background-color': vars[cur] }
      pre.push([`bg-${key}`, bgCss])
    }
    return pre
  },
  [] as [string, Record<string, string | number>][]
)

/** unocss rules 加入border color */
export const borderColorRules = Object.entries(vars).reduce(
  (res, [key, value]) => {
    if (key.startsWith('color-border-')) {
      const index = key.split('-')[2]
      const css = { 'border-color': value }
      res.push([`border-color-${index}`, css])
    }
    return res
  },
  [] as [string, Record<string, string | number>][]
)

/** unocss rules 加入Gradient Colors */
export const gradientColorsRules = Object.entries(gradientColors).reduce(
  (res, [key, value]) => {
    const css = { background: value }
    res.push([key, css])
    return res
  },
  [] as [string, Record<string, string | number>][]
)

export const webFontsOptions: WebFontsOptions = {
  provider: 'none',
  fonts: {
    'hyper-num': ['hyper-num', 'sans-serif']
  }
}
